<template>
  <el-table-column
    v-for="(item, index) in tableHeaders"
    :key="item.value"
    :sortable="item.isSort"
    :property="item.value"
    show-overflow-tooltip
    :width="item.width ?? 'auto'"
    :min-width="item.minWidth"
    :fixed="item.fixed"
  >
    <template #header>
      <div class="customer-header">
        <div class="customer-header__label" @click.stop>{{ tableHeaders[index].label }}</div>
        <FilterTableItem
          v-if="tableHeaders[index].isSelect"
          :table-header-item="tableHeaders[index]"
          :column-index="index"
          @handel-filter-data="handelFilterData"
        />
      </div>
    </template>
    <template v-if="isCustomerCol(item).value" #default="{ row }">
      <div v-if="['receiveTaskShouldAllAmount', 'receivedTaskAllAmount', 'timeOutAmount'].includes(item.value)">
        <span v-if="row[item.value]">￥{{ row[item.value] }}</span>
        <span v-else>0</span>
      </div>
      <div v-if="item.value === 'timeOutDay'">
        <span v-if="row.timeOutDay && Number(row.timeOutDay)>0">{{ row.timeOutDay }}天</span>
        <span v-else>0</span>
      </div>
      <div v-if="item.value === 'receiveStatus'">{{ receiveStatus(row).value }}</div>
    </template>
  </el-table-column>
</template>

<script setup>
import FilterTableItem from "../FilterTableItem";
import useComputedParams from "@/hooks/useComputedParams";

defineProps({
  tableHeaders: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["handelFilterData"]);

const customerColList = ["receiveTaskShouldAllAmount", "receivedTaskAllAmount", "receiveStatus", "timeOutAmount", "timeOutDay"];
const isCustomerCol = useComputedParams(data => {
  return customerColList.includes(data.value);
});

const receiveStatusMap = new Map([
  [1, "未收款"],
  [2, "已收齐"],
  [4, "部分收款"]
]);
const receiveStatus = useComputedParams(data => {
  return receiveStatusMap.has(data.receiveStatus) ? receiveStatusMap.get(data.receiveStatus) : "其他";
});

const handelFilterData = data => {
  emit("handelFilterData", data);
};
</script>

<style scoped lang="scss">
@import "customTableColumn";
</style>
